<template>
  <div class="cinema_body">
				<ul v-if="list.length">
					<li v-for="cinema in list" :key="cinema.title">
						<div>
							<span>{{cinema.name}}</span>
							<span class="q"><span class="price">{{cinema.minPrice/100}}</span> 元起</span>
						</div>
						<div class="address">
							<span>{{cinema.addr}}</span>
							<span>{{cinema.distance}}</span>
						</div>
						<div class="card">
                			<div v-for="(val,key) in cinema.discounts" :key="key" v-show="val" :class='key|color'>
								{{key|text}}</div>
                			<div>折扣卡</div>
       					</div>
					</li>

				</ul>
			</div>

</template>

<script>
export default {
    name:'CiList',
	data(){
		return {list:[]}
	},
	async created(){
		let data = await this.$axios.get('/api/cinema');
		// console.log(data);
		this.list = data.data.list;
		
	},
	filters:{
		//过滤器找出对应的东西
		text(key){
			let textObj = {
				'allowRefund':'认证',
				'buyout':'上市',
				"cityCardTag":"城市名片",
				'deal':"政策",
				'endorse':"促销",
				'hallTypeVOList':"人气",
				"sell":"销量",
				'snack':"小吃",
				"vipTag":'折扣卡'
			}
			return textObj[key];
		},
		color(key){
			let colorObj = {
				'allowRefund':'or',
				'buyout':'or',
				"cityCardTag":"or",
				'deal':"bl",
				'endorse':"bl",
				'hallTypeVOList':"bl",
				"sell":"bl",
				'snack':"bl",
				"vipTag":'or'
			}
			return colorObj[key];
		}
	}
}
</script>

<style scoped>
    #content .cinema_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-around; align-items:center; background:white;}
	#content .cinema_body{ flex:1; overflow:auto;}
	.cinema_body ul{ padding:20px;}
	.cinema_body li{  border-bottom:1px solid #e6e6e6; margin-bottom: 20px;}
	.cinema_body div{ margin-bottom: 10px;}
	.cinema_body .q{ font-size: 11px; color:#f03d37;}
	.cinema_body .price{ font-size: 18px;}
	.cinema_body .address{ font-size: 13px; color:#666;}
	.cinema_body .address span:nth-of-type(2){ float:right; }
	.cinema_body .card{ display: flex;}
	.cinema_body .card div{ padding: 0 3px; height: 15px; line-height: 15px; border-radius: 2px; color: #f90; border: 1px solid #f90; font-size: 13px; margin-right: 5px;}
	.cinema_body .card div.or{ color: #f90; border: 1px solid #f90;}
	.cinema_body .card div.bl{ color: #589daf; border: 1px solid #589daf;}
</style>